<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				color: gray;
				text-decoration: none;
			    box-sizing: content-box;
			}
			
			#jd{
				width: 990px;
				height: auto;
				
			}
			
			.body{
				width: 1520px;
				height: 475px;
				background: #E93854 ;
			}
			.body img{
				position: relative;
				left: 170px;
			}
			.dologin{
				width:420px ;
				height: 330px;
				background: #fff;
				position: relative;
				bottom: 444px;
				left: 820px;
			}
			
			.dologin a img{
				position: relative;
				top: 6px;
				left: -4px;
				margin-left: -23px;
				margin-top: 1px;
			}
			
			.footer{
				position: absolute;
				left: 300px;
				top: 582px;
			}
			.footer a{
				margin:20px 15px;
				font-size: 13px;
			}
			.copy{
				margin-top: -290px;
				font-size: 13px;
				
			}
			
			.dologin .zhuce{
				color: #C61D1D;
				font-size: 16px;
				padding-left: 199px;
				
			}
			.dologin h2{
				font-weight: 100;
				padding-top: 35px;
				padding-left: 20px;
				margin: 10px;
			}
			
			.dologin .nick{
				margin-left: 30px;
				margin-bottom: -20px;
				margin-top: 26px;
			}
			.nick img{
				margin-top: -1px;
			}
			.pwd img{
				margin-top: 1px;
			}
			.dologin .pwd{
				margin-left: 30px;
				margin-top: 33px;
			}
			
			.dologin input{
				position: relative;
				line-height:36px;
	            width:313px;
	            margin-left: -5px;	
	            top: -15px;
			}
			
			.auto{
				font-size: 12px;
			}
			.auto input{
				width: 90px;
				margin-top: 26px;
			}
			.auto .labauto{
				position: relative;
				margin-left: -40px;
				top: -18px;
			} 
			.auto a{
				position: relative;
				margin-left: 233px;
				top:-19px;
			}
			
			.dologin .btn{
				display:inline-block;
				height:35px;
				width: 359px;
				margin-left: 30px;
				line-height:35px;
				text-align:center;
				color:#fff;
				background:#e4393c;
				font-size:18px;
			}
			#logo{
				margin-left: 240px;
				margin-bottom: 15px;
				margin-top: 10px;
			}
			#logo h2{
				display: inline-block;
			}
			#logo h2{
				position: relative;
				font-weight: 200;
				margin-left: 25px;
				bottom: 19px;
			}
			.dologin .zhuce:hover{
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div id="logoBox">
		<div id="logo">
			<img src="img/logo.png" alt="LOGO" width="170px" height="60px"/>
			<h2>欢迎登录</h2>
		</div>
		<div class="body">
			<img src="img/jd1.png" alt="京东登录" width="990px" height="475px"/>
		</div>
		
		<div class="dologin">
			
			<h2>京东会员<a href="#" class="zhuce"><img src="img/jd6.png"/>立即注册</a></h2>
		
			<div class="nick">
				<img src="img/jd4.png" width="40px" height="40px" />
				<input name="nick" type="text" value="邮箱/用户名/已验证手机" />
			</div>
			
			<div class="pwd">
				<img src="img/jd5.png" width="40px" height="40px"/>
				<input name="pwd" type="password" />
			</div>
			
			<div class="auto">
				<input name="autoLogin" type="checkbox"/>
				<label class="labauto">自动登录</label>
			    <a href="#">忘记密码？</a>
			</div>
			<a href="#" class="btn">登录</a>
			
		</div>
		<div class="footer">
			<a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">商家入驻</a>|
			<a href="#">广告服务</a>|<a href="#">手机京东</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|
			<a href="#">京东社区</a>|<a href="#">京东公益</a>|<a href="#">English Site</a>
			
		</div>
		<div class="copy">
			<p align="center">Copyright © 2004-2018  京东JD.com 版权所有</p>
		</div>
	    </div>
	</body>
</html>
